<template>
  <div>
    <!-- 头部 -->
    <div class="pd-45">
      <div class="header bg-fff flex jc-sb aic pl-10 pr-10 fixed w100pc">
        <div @click="back">
          <i class="iconfont iconleft"></i>
        </div>
        <span class="f16">选择日期</span>
        <span></span>
      </div>
    </div>

    <!-- 日历 -->
    <ele-calendar :render-content="renderContent" :data="datedef" :prop="prop" @pick="go">
      <!-- 日历表头插槽 -->
      <!-- todo="{'yearLabel':'年','month':'月','event':[prevYear,prevMonth,nextYear,nextMonth]}" -->
      <template slot-scope="slotProps">
        <van-row>
          <van-col span="6" align="center">
            <van-button type="info" @click="slotProps.todo.event[1]">上一月</van-button>
          </van-col>
          <van-col span="6" align="center">{{slotProps.todo.yearLabel}}</van-col>
          <van-col span="6" align="center">{{slotProps.todo.month}} {{up(slotProps.todo.month)}}</van-col>
          <van-col span="6" align="center">
            <van-button type="info" @click="slotProps.todo.event[3]">下一月</van-button>
          </van-col>
        </van-row>
      </template>
    </ele-calendar>

    <!-- 确定按钮 -->
    <div class="btn fcc fixed w100pc fff" @click="confirm">确定</div>
  </div>
</template>

<script>
import eleCalendar from "ele-calendar";
import "ele-calendar/dist/vue-calendar.css";
export default {
  data() {
    return {
      datedef: [
        // { date: "2019-0${this.month}-12", content: '' },
        // { date: "2019-0${this.month}-13", content: '' }
      ],
      prop: "date", //对应日期字段名
      normalPrice: "", //平常价格
      highPrice: "", //周六价格

      houseId: "", //房子id
      startDate: "", //入住日期
      endDate: "", //离开日期

      start: "", //第一次点击
      active: 1, //点击计数器
      month: "" //当前月数
    };
  },
  components: {
    eleCalendar
  },

  created() {
    this.getPrice();
  },

  methods: {
    // 返回上一级路由
    back() {
      history.back();
    },

    // 确定
    confirm() {
      if (this.startDate && this.endDate) {
        this.$router.push({ name: "writeOrder" });
      } else {
        this.$toast.fail("请选择日期");
      }
      // 总天数
      let day = (this.endDate - this.startDate) / 86400000;
      // 总价
      let totalMoney = (day * this.normalPrice).toString();
      this.$store.commit("updateHouseId", this.houseId);
      this.$store.commit("updateStartDate", this.startDate);
      this.$store.commit("updateEndDate", this.endDate);
      this.$store.commit("updateTotalMoney", totalMoney);
    },

    // 根据id与最低价格请求后台数据
    async getPrice() {
      this.$loading();

      let data = {
        houseId: this.$route.params.houseId,
        minPrice: this.$route.params.minPrice
      };
      let url = "/house/getPrice";
      try {
        let res = await this.$axios.post(url, data);
        // console.log(res);
        this.normalPrice = res.normalPrice / 100;
        this.highPrice = res.highPrice / 100;
        this.houseId = res.houseId;
      } catch (error) {}
      this.$clear();
    },

    // pick事件
    go(date, event, row) {
      let month = new Date(date).getMonth() + 1;
      // console.log(month);
      if (this.active === 1) {
        // 第一次点击，入住
        this.active++;
        this.startDate = date;
        this.start = row.text;
        // 禁止点击
        for (let i = row.text; i > 0; i--) {
          this.datedef.push({
            date: `"2019-0${this.month}-${i}"`,
            content: "别点我"
          });
        }
        this.datedef.push({ date: date, content: "入住" });
      } else if (this.active === 2) {
        if (date <= this.startDate) {
          this.$toast.fail("请选择入住日期之后的时间");
          this.datedef = [{ date: this.startDate, content: "入住" }];
          return false;
        }
        for (let i = this.start; i > 0; i--) {
          this.datedef.push({
            date: `"2019-0${this.month}-${i}"`,
            content: "别点我"
          });
        }
        // 第二次点击，退房
        this.active++;
        this.endDate = date;

        // 连接
        for (let i = this.start; i < row.text; i++) {
          this.datedef.push({
            date: `"2019-0${this.month}-${i}"`,
            content: "入住"
          });
        }
        this.datedef.push({ date: date, content: "退房" });
      } else {
        // 第三次点击，清空
        this.active = 1;
        this.datedef = [];
        this.startDate = "";
        this.endDate = "";
      }
      // console.log(date);
      // console.log(event);
      // console.log(row);
    },
    renderContent(h, parmas) {
      // console.log(h);
      // console.log(parmas);

      const loop = data => {
        // console.log(data);
        if (data.defvalue.value) {
          if (data.defvalue.value.content === "入住") {
            return (
              <div class="flex2 selected">
                {data.defvalue.text}
                <span>{data.defvalue.value.content}</span>
              </div>
            );
          } else if (data.defvalue.value.content === "别点我") {
            return (
              <div class="flex2 disabled">
                {data.defvalue.text}
                <span>{data.defvalue.value.content}</span>
              </div>
            );
          } else {
            return (
              <div class="flex2 selected">
                {data.defvalue.text}
                <span>{data.defvalue.value.content}</span>
              </div>
            );
          }
        } else if (data.defvalue.column === 6) {
          return (
            <div class="flex2">
              {data.defvalue.text}
              <span>￥{this.highPrice}</span>
            </div>
          );
        } else {
          return (
            <div class="flex2">
              {data.defvalue.text}
              <span>￥{this.normalPrice}</span>
            </div>
          );
        }
      };
      return <div style="min-height:60px;">{loop(parmas)}</div>;
    },
    // 月
    up(month) {
      this.month = month[0];
    }
  }
};
</script>

<style lang="less">
@import "../../style/chooseDate.less";
</style>

